import React, { useState, useEffect } from 'react'
import './myscss/evaluate.scss'
import axios from 'axios';
import { Rate, Space, Toast } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { InfiniteScroll, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Fans() {
  let navigate = useNavigate()
  
  //实现触底加载
  const [evluate, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
  async function loadMore() {
    const append = await axios.get('/zjl_getevaluate', { params: { current: page, pagesize: 5 } }).then(async (res) => {
      await sleep(2000)
      let { data: { evluate } } = res
      return evluate
    })
    setPage(page + 1)
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
  }
  // 使用 useEffect 设置定时器
  const [pages, setpages] = useState()
  useEffect(() => {

setpages(localStorage.getItem('evluate'))
  
  }, []); // 空数组作为第二个参数，表示只在组件挂载和卸载时运行
  return (
    <div id='Evaluate'>
      <div id="main">
       
        <div className='fans_length'>
          <b onClick={() => { navigate('/mine') }}>&lt;</b><span>患者评价</span>
        </div>

        <div id="main">
          <h4>共<span style={{ color: 'red' }}>{pages}</span>个评价</h4>
          <List>
            <>
              {
                evluate.map((item, index) => (
                  <div className="all" key={item._id}>
                    <div className='li'>
                      <img src={item.path} alt="" />
                      <b> <p >{item.name}</p></b>
                      <p>{item.gender}</p>
                      <p>{item.age}</p>
                      <Rate  style={{
              '--star-size': '15px',
            }} readOnly value={item.score} />
                    </div>
                    <div className='text'>
                      {item.content}
                    </div>
                    <div className='time'>{item.time.split('T')[0]+' '+item.time.split('T')[1].split('.')[0]}</div>
                  </div>

                ))
              }
            </>
          </List>
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>

      </div>
    </div>
  )
}

